<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
        #classify-list {
            width: 100px;
            background-color: #FFF!important;
            overflow-x: hidden !important;
        }

        #classify-list .aui-list {
            overflow-y: scroll !important;
        }

        .aui-list .aui-list-item-title {
            font-size: 0.7rem;
        }

        .aui-list .aui-list-item.aui-active {
            color: #fff !important;
            border-left: 3px solid #EE6AA7 !important;
            background: -webkit-linear-gradient(to right, rgba(255, 20, 147, 0.9), rgba(255, 160, 122, 1));
            background: -o-linear-gradient(to right, rgba(255, 20, 147, 0.9), rgba(255, 160, 122, 1));
            background: -moz-linear-gradient(to right, rgba(255, 20, 147, 0.9), rgba(255, 160, 122, 1));
            background: linear-gradient(to right, rgba(255, 20, 147, 0.9), rgba(255, 160, 122, 1));
        }

        .aui-list .aui-list-item.aui-active div {
            color: #fff;
        }

        .aui-label {
            border-top-left-radius: 0% !important;
            border-bottom-left-radius: 0% !important;
        }

        .aui-bar {
            padding-top: 25px !important;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bg-tag-money" id="aui-header">
        <a class="aui-pull-left aui-btn" tapmode onclick=""> <span class="aui-iconfont aui-icon-left aui-hide"></span> </a>
        <div class="aui-title" id="name">商品分类</div>
    </header>
    <section class="aui-content" id="classify-list">
        <ul class="aui-list" id="menulist">
        </ul>
    </section>
    <script id="menulisttmpl" type="text/x-dot-template">
        {{? it.length>0}} {{for (var i=0 ;i
        <it.length; i++) {}}{{?it[i].parent_id==0}} <li class="aui-list-item {{?i==0}}aui-active{{?}} aui-label" id="menu_{{=i}}" tapmode onclick="openFrame({{=i}})">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title">{{=it[i].cname}}</div>
            </div>
            </li>
            {{?}} {{ } }} {{?}}
    </script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/jdpddmenu.js"></script>
<script type="text/javascript">
    var headerPos;
    var classifyListH;
    var appSetInfo=$api.getStorage('appSetInfo');
    apiready = function() {
        api.parseTapmode();
        var header = $api.byId('aui-header');
        var the_menulist =appSetInfo.indexshowtype=='tb'?TB_MENU:appSetInfo.indexshowtype=='jd'?JD_MENU:PDD_MENU;
        headerPos = $api.offset(header);
        $api.text($api.byId('name'), appSetInfo.indexshowtype=='tb'?'淘宝商品分类':appSetInfo.indexshowtype=='pdd'?'拼多多商品分类':'京东商品分类');
        classifyListH = $api.offset($api.byId('classify-list')).w;
        document.getElementById("classify-list").style.height = api.winHeight - headerPos.h + "px";
        var frame_list = [];
        var one_menu_list = [];
        var index = 0;
        for (var i = 0; i < the_menulist.length; i++) {
            if (the_menulist[i].parent_id == 0) {
                var frm = {
                    name: 'jd_menulist_frame_' + the_menulist[i].cid,
                    url: './pdd_jd_menulist_frm.html',
                    pageParam: {
                        cid: the_menulist[i].cid,
                        source_type: $api.getStorage('appSetInfo').indexshowtype,
                        index: index++
                    },
                    bounces: true,
                    allowEdit: true,
                    overScrollMode: 'always'
                };
                frame_list.push(frm);
                one_menu_list.push(the_menulist[i]);
            }

        }
        setDotTmpl("menulisttmpl", "menulist", one_menu_list);
        api.openFrameGroup({
            name:'menulist_frame_list',
            background: '#fff',
            scrollEnabled: false,
            rect: {
                x: classifyListH,
                y: headerPos.h,
                w: api.winWidth - classifyListH,
                marginBottom: 0
            },
            fixedOn: 'ui_window',
            index: 0,
            preload: 2,
            frames: frame_list
        }, function(ret, err) {
            if (ret) {
                var menulist_ul = $api.byId('menulist');
                $api.removeCls($api.dom(menulist_ul, ".aui-active"), 'aui-active');
                $api.addCls($api.byId("menu_" + (ret.index)), 'aui-active');
            } else {
            }
        });

    };

    function openFrame(data) {
        api.setFrameGroupIndex({
            name:'menulist_frame_list',
            index: data,
        });
    }
</script>

</html>
